<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
        #div1{
        	width:100px;height:150px;background: red;position: absolute;right:0;bottom:0;
        }
        body{
        	height:2000px;
        }
	</style>
	<script type="text/javascript">

        window.onscroll = function(){
        	var oDiv = document.getElementById('div1');
        	var scrollTop = document.documentElement.scrollTop;

        	startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));

            var timer = null;
        	function startMove(iTarget){
                var oDiv = document.getElementById('div1');

                clearInterval(timer);

                timer = setInterval(function(){
                	var speed = (iTarget-oDiv.offsetTop)/6;
                    speed = speed>0?Math.ceil(speed):Math.floor(speed);

                	if( oDiv.offsetTop == iTarget ){
                		clearInterval(timer);
                	}else{
                		oDiv.style.top = oDiv.offsetTop+speed+'px';
                	}

                }, 30);

        	}
        }
	</script>
</head>
<body>
  
    <div id="div1"></div>
	
</body>
</html>